<template>
  <div class="main">
    <!-- 动态组件，避免加载不必要的js -->
    <keep-alive>
      <component :is='currentComponent'></component>
    </keep-alive>
    <tool-bar @onChangeFragment='onChangeFragment'
              ref="toolBar">
    </tool-bar>
  </div>
</template>
<script>
import ToolBar from '@c/currency/ToolBar.vue'
export default {
  name: 'imooc',
  data () {
    return {
      currentComponent: 'home'
    }
  },
  activated () {
    this.pushFragment()
  },
  components: {
    ToolBar,
    'home': () => import('@c/Home.vue'),
    'shopping': () => import('@c/Shopping.vue'),
    'my': () => import('@c/My.vue')
  },
  methods: {
    // 组件切换
    onChangeFragment (value) {
      this.currentComponent = value
    },
    // 指定加载的页面组件
    pushFragment () {
      // 获取指定加载页面的下标
      const index = this.$route.params.componentsIndex
      if (!index) return
      this.$refs.toolBar.pushFragment(index)
    }
  }
}
</script>
<style scoped lang = 'scss'>
.main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
}
</style>